<template>
  <div class="home-page">
    <div class="total-data">
      <div class="total-top">
        <p class="p-title">今日数据</p>
        <div class="toggle" @click="isShow = !isShow">
          <span class="text">{{isShow? '收起' : '展开'}}</span>
          <el-icon :size="20" class="el-icon" v-if="isShow"><ArrowUpBold /></el-icon>
          <el-icon :size="20" v-else class="el-icon"><ArrowDownBold /></el-icon>
        </div>
      </div>
      <ul v-if="isShow">
        <li v-for="(item, index) in dataList" :key="index">
          <p>{{ (index === 3 ? MoneyUnit(item.value) : item.value) || 0 }}</p>
          <p>{{ item.name }}</p>
        </li>
      </ul>
    </div>
    <div class="content">
      <div class="cont-top">
        <div class="brief">
          <h3 class="h3">Zkmall商城-B2B2C多商户 商家端</h3>
          <p class="p">ZKMALL商城-B2B2C多商户 商家端、基于Vue3 Vite ElementPlus 技术研发、系统采用前后端分离架构、 B2C、O2O、B2B2C商城、SAAS、小程序商城、H5商城、APP商城、java商城、独立的商家管控入口
            本商城致力于为企业打造一个功能完整、易于维护的微服务B2B2C电商商城系统，采用主流技术实现。后台管理系统包含平台管理，店铺管理、商品管理、订单管理、规格管理、权限管理等模块</p>
          <b class="b">当前版本: v3.0.</b>
          <div class="tag">¥免费开源</div>
          <div class="btn-warp">
            <el-button class="btn btn-primary" type="primary" @click="jumpLink('https://gitee.com/zkmall/')"><img class="icon" src="../../assets/images/home/icon.png" />访问码云</el-button>
            <el-button class="btn" @click="jumpLink('https://www.mallzk.com/')"><img class="icon" src="../../assets/images/home/icon2.png" />访问主页</el-button>
          </div>
        </div>
        <div class="technology">
          <h3 class="h3">技术选型</h3>
          <el-table
              class="table"
              :data="tableData"
              border
          >
            <el-table-column label="后端" prop="backend" />
            <el-table-column label="前端" prop="frontend" />
          </el-table>
        </div>
      </div>
      <div class="banner">
        <a href="https://work.weixin.qq.com/kfid/kfc17b8fa3faa835f42" target="_blank"><img class="img" src="../../assets/images/home/banner.png" /></a>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onBeforeMount } from 'vue'
import {
  dashIndex,
} from '@/api/dashboard'
import {ArrowUpBold, ArrowDownBold} from "@element-plus/icons-vue";
const isShow = ref(false)
const form = ref({
  condition: 1
})
const tableData = ref([{
  backend: 'SpringBoot3',
  frontend: 'Vue3',
}, {
  backend: 'Shiro',
  frontend: 'Vuex',
}, {
  backend: 'JWT',
  frontend: 'Element-ui',
}, {
  backend: 'MybatisPlus',
  frontend: 'Axios',
}, {
  backend: 'Druid',
  frontend: 'sass',
}, {
  backend: 'XXL-Job',
  frontend: 'VueRouter',
}, {
  backend: 'Redisson',
  frontend: 'Vite',
}, {
  backend: 'Redis',
  frontend: 'Echarts',
}, {
  backend: 'Mysql',
  frontend: 'canvas',
}])
const dataList = ref([
  { name: '店铺访问次数 (次)', value: '', field: 'total' },
  { name: '待处理订单 (件)', value: '', field: 'stayOrders' },
  { name: '售后订单 (件)', value: '', field: 'stayAfters' },
  { name: '成交金额 (万元)', value: '', field: 'money' }
])


onBeforeMount(() => {
  getTotalData()
})

const getTotalData = async () => {
  const res = await dashIndex(form.value)
  if (res.code === '') {
    const d = res.data
    // 小于100元，单位为 元
    if (d.money < 10000) {
      dataList.value[3].name = '成交金额 (元)'
    }
    dataList.value.map((item) => {
      item.value = d[item.field]
    })
  }
}
const MoneyUnit = (v) => {
  if (!v) return 0
  if (v < 10000) {
    return v.toFixed(2)
  } else {
    return (v / 10000).toFixed(2)
  }
}
const jumpLink = (url) => {
  window.open(url)
}
</script>

<style lang="scss" scoped>
ul {
  list-style: none;
}
.home-page {
  height: 100%;
  .total-data {
    .total-top{
      display: flex;
      justify-content: space-between;
      padding-right: 20px;
      .p-title {
        padding-left: 20px;
        font-size: 24px;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        line-height: 50px;
        height: 50px;
        margin: 0;
      }
      .toggle{
        display: flex;
        line-height: 50px;
        align-items: center;
        cursor: pointer;
        .text{
          font-size: 20px;
          margin-right: 10px;
        }
        .el-icon{}
      }
    }

    ul {
      overflow: hidden;
      display: flex;
      padding: 0;
      li {
        padding: 0;
        box-sizing: border-box;
        flex: 4;
        width: 400px;
        height: 140px;
        background: rgba(255, 255, 255, 1);
        border: 1px solid rgba(224, 229, 235, 1);
        border-radius: 4px;
        margin: 20px;
        p {
          margin: 0;
          height: 70px;
          line-height: 70px;
          text-align: center;
          &:nth-child(1) {
            font-size: 48px;
            font-weight: 600;
          }
          &:nth-child(2) {
            font-size: 18px;
          }
        }
        &:nth-child(1) {
          p:nth-child(1) {
            color: #1acda1;
          }
        }
        &:nth-child(2) {
          p:nth-child(1) {
            color: #ffae11;
          }
        }
        &:nth-child(3) {
          p:nth-child(1) {
            color: #ff7911;
          }
        }
        &:nth-child(4) {
          p:nth-child(1) {
            color: #3a68f2;
          }
        }
      }
    }
  }
}
.empty {
  height: 450px;
  img {
    width: 80px;
    height: 80px;
    margin: 100px auto 10px;
    display: block;
  }
  p {
    text-align: center;
    color: #333333;
  }
}
.full-size {
  height: 500px;
}

.content{
  .cont-top{
    padding: 0 40px 40px;
    display: flex;
    flex-wrap: wrap;
    .brief{
      width: 700px;
      margin-right: 15%;
      .h3{
        font-size: 30px;
        color: #333333;
        line-height: 43px;
        margin-bottom: 10px;
      }
      .p{
        font-size: 16px;
        color: #6E7079;
        line-height: 24px;
        margin-bottom: 15px;
      }
      .b{
        font-size: 12px;
        color: #3D3D3D;
        line-height: 17px;
        margin-bottom: 40px;
        display: block;
      }
      .tag{
        padding: 5px 10px;
        background: rgba(208,74,65,0.1);
        border-radius: 4px;
        font-size: 14px;
        color: #D04A41;
        line-height: 20px;
        margin-bottom: 16px;
        display: inline-block;
      }
      .btn-warp{
        .btn{
          width: 114px;
          height: 37px;
          .icon{
            margin-right: 4px;
          }
        }
        .btn-primary{
          background-color:#E8F3FF;
          border-color: #E8F3FF;
          color: #3C7ECF;
          &:hover{
            background-color:#D0EBFF;
            border-color: #D0EBFF;
          }
        }
      }
    }
    .technology{
      .h3{
        font-size: 30px;
        color: #333333;
        line-height: 43px;
        margin-bottom: 10px;
        text-align: center;
      }
      :deep(.table){
        width: 300px;
        th.el-table__cell{
          background: rgb(238, 243, 255);
          color: rgb(51, 51, 51);
        }
      }
    }
  }
  .banner{
    padding: 20px;
    background: #F7F7F7;
    .img{
      width: 100%;
    }
  }
}
</style>
